<template>
  <div class="language-selector">
    <el-dropdown trigger="click" @command="handleLanguageChange">
      <span class="language-trigger">
        {{ currentLanguageLabel }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="lang in languages" 
                           :key="lang.code" 
                           :command="lang.code"
                           :class="{ active: currentLanguage === lang.code }">
            {{ lang.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const languages = [
  { code: 'zh', label: '中文' },
  { code: 'en', label: 'English' },
  { code: 'ru', label: 'Русский' }
]

const currentLanguage = computed(() => locale.value)

const currentLanguageLabel = computed(() => {
  const lang = languages.find(l => l.code === currentLanguage.value)
  return lang ? lang.label : languages[0].label
})

const handleLanguageChange = (lang: string) => {
  locale.value = lang
  // 可以在这里添加持久化存储语言选择
  localStorage.setItem('userLanguage', lang)
}
</script>

<style lang="scss" scoped>
.language-selector {
  .language-trigger {
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    
    &:hover {
      opacity: 0.8;
    }
  }
}

:deep(.el-dropdown-menu__item) {
  font-size: 14px;
  
  &.active {
    color: var(--el-color-primary);
    font-weight: bold;
  }
}
</style> 